<template>
  <n-menu
    :options="menus"
    :inverted="inverted"
    :mode="mode"
    :collapsed="collapsed"
    :collapsed-width="64"
    :collapsed-icon-size="20"
    :indent="24"
    :accordion="true"
    @update:expanded-keys="menuExpanded"
    @update:value="handleUpdateMenu"
  ></n-menu>
</template>

<script lang="ts" setup>
import { sideMenuEvent } from "@/layouts/Menu/SideMenuEvent";

import { menus } from "@/setting/menu";

interface MenuProp {
  mode?: string;
  collapsed?: boolean;
}

// 不是所有的props都需要const
withDefaults(defineProps<MenuProp>(), {
  mode: "vertical",
  collapsed: false,
});

// 菜单展示 点击菜单路由跳转
const { handleUpdateMenu, menuExpanded } = sideMenuEvent(menus);

// 侧边导航栏菜单的样式.
// TODO 后面要改成可调整的.
const inverted = computed(() => {
  return "dark" !== "dark";
});
</script>

<style scoped></style>
